import styled from "styled-components"
import { useAchievement } from "../../useData/useAchievement"
import { useAfter } from "../../useData/useAfter"
import FlyBox from "../fly-box"

const Part03 = () => {

  const [chartAfter] = useAfter()
  const [chartAchievement] = useAchievement()

  return <FlyBox>
    <Container>
      <div ref={chartAfter} style={{ width: 242, height: 208 }} />
      <div ref={chartAchievement} style={{ height: 208, width: 520 }} />
    </Container>
  </FlyBox>
}

export default Part03


const Container = styled.div`
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: space-around;
`